<!-- home -->
<template>
  <div class="container">
    <div class="header">
      <!-- <div class="header-text">
        <img :src="WxInfo.headimgurl" alt="" class="header-avator" />
        <div>{{ WxInfo.nickname }}</div>
      </div> -->
      <div class="header-text">
        <van-uploader
          accept="image/png"
          :after-read="file => checkImg(file, 'logo')"
          :disabled="false"
        >
          <img
            :src="userInfo.avatar"
            class="header-avator"
          />
        </van-uploader>

        <div>{{ userInfo.name }}</div>
      </div>
    </div>
    <div class="list">
      <van-cell-group inset>
        <van-cell title="个人信息" :label="userInfo.name ? '已完善' : '待完善'" is-link to="user/edit" />
        <van-cell title="身份认证" :label="isAuthText" is-link @click="goCard()" />
        <van-cell
          title="个人邀请码"
          :value="userInfo.inviteCode ? userInfo.inviteCode : '可以联系管理员生成'"
          :label="userInfo.inviteCode ? '点击复制' : '未生成'"
          @click="copyText(userInfo.inviteCode)"
        />
        <van-cell
          title="邀请码"
          :value="userInfo.inviter ? userInfo.inviter : '点击填写邀请码'"
          :label="userInfo.inviter ? '已填写' : '未填写'"
          is-link
          to="user/inviter"
        />
        <van-cell
          title="登出"
          value='点击登出账户'
          label="已经登录状态"
          is-link
          @click="remove"
        />
      </van-cell-group >

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { uploadH5Avatar } from '@/api/user.js'
import { Toast,Dialog } from 'vant'
import { removeToken } from '@/api/wxLogin.js'
export default {
  name: 'User',
  data() {
    return {
      wechat: `${this.$cdn}/wx/640.gif`
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'isAuth', 'isAuthText', 'WxInfo'])
  },
  mounted() {
  },
  // FIXME: 激活组件时默认重新获取一次用户信息 临时调整待优化
  activated() {
    // this.$store.dispatch('setUserInfo')
  },
  methods: {
    // 文本复制
    copyText(text) {
      // 只有认证通过的人有邀请码
      if (text) {
        var textarea = document.createElement('textarea')
        document.body.appendChild(textarea)
        // 隐藏此输入框
        textarea.style.position = 'fixed'
        textarea.style.clip = 'rect(0 0 0 0)'
        textarea.style.top = '10px'
        // 赋值
        textarea.value = text
        // 选中
        textarea.select()
        // 复制
        document.execCommand('copy', true)
        // 移除输入框
        document.body.removeChild(textarea)
        this.$notify({ type: 'success', message: '邀请码复制成功!' })
      }
    },
    goCard() {
      console.log(this.userInfo)
      if (this.userInfo.cardno) {
        this.$router.push('user/card')
      } else {
        this.$notify({ type: 'warning', message: '请先完善个人资料!' })
      }
    },
    async checkImg(file,v){
      console.log('checkImg',file,v)
      const fd = new FormData()
      fd.append('file', file.file)
      let toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '正在提交'
      })
      try {
        // 获取图片上传后的回调路径
        const res = await uploadH5Avatar(fd)
        console.log(this.userInfo)
        this.userInfo.avatar = res.data
        this.$store.dispatch('setUserBaseInfo')
        console.log(this.userInfo);
        // 提交成功后转换待审核模式
        // if (res.code == 200) {
        //   // this.initData()
        //   Dialog.alert({
        //     message: msg
        //   })
        // }
      } finally {
        toast.clear()
      }
    },
    remove(){
      Dialog.confirm({

        message:
          '是否确认注销',
      })
        .then(() => {
          removeToken()
          this.$router.push({
            path: '/login',
          })
        })
        .catch(() => {
          console.log(2)
        })
    }
    
  }
}
</script>
<style lang="scss" scoped>
body {
  background: #f6f6f6;
}
.header {
  background: url(~@/assets/bg2.png) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 240px;
  &-text {
    text-align: center;
    color: white;
    font-size: 26px;
    font-weight: 400;
  }
  &-avator {
    margin: 25px auto 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    // border: 3px solid #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
}
.list {
  margin-top: -45px;
}
.about-container {
  /* 你的命名空间 */
  background: #fff;
  height: 100vh;
  box-sizing: border-box;
  .warpper {
    padding: 50px 12px 12px 12px;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #666;
      font-size: 14px;
      .demo-home__title {
        margin: 0 0 6px;
        font-size: 32px;
        .demo-home__title img,
        .demo-home__title span {
          display: inline-block;
          vertical-align: middle;
        }
      }
      .item {
        font-size: 14px;
        line-height: 34px;
        a {
          text-decoration: underline;
        }
        .van-button {
          /* vant-ui 元素*/
          background: #ff5500;
        }
      }

      .logo {
        width: 120px;
        height: 120px;
        // background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
      }
      .wechat {
        width: 200px;
        height: 200px;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
</style>
